/**
 * 我的功能列表
 */
import React from 'react';
import {Link} from 'react-router-dom'
import { Card, Row, Col, message, Button } from 'antd';
import style from './modulelist.module.scss'
import Iconfont from '../../util/iconfont'

import LibraryJs from '../../library/js'   // 公共工具类
// redux
import { connect } from "react-redux";

class ModuleList extends React.Component {
    constructor(){
        super()
        this.state={
            modulelist:[]
        }
    }
    render(props) {
        return <div className={style.modulelist}>
            <Row gutter={15}>
                {
                    this.state.modulelist.map((val, i) => {
                        return <Col key={i} span={4}>
                            <Link to={val.routerBase}>
                                <Card title={<span><Iconfont type={val.icon} /> {val.title}</span>}>
                                    <p>{val.message}</p>
                                </Card>
                            </Link>
                        </Col>
                    })
                }
            </Row>
            <Row className={style.shopbtn}>
                <Link to='/moduleShop'><Button type='primary'>前往功能商店</Button></Link>
            </Row>
        </div>
    }
    componentDidMount() {
        // 使用 redux 中的qiankuin：
        // this.props.qiankun.actions   this.props.qiankun.loadMicroApp
        let apps = LibraryJs.localGet('apps') 
        if (apps instanceof Array) {
            this.setState({
                modulelist: apps
            })
        }else{
            message.warning('请先登录')
            setTimeout(() => {
                LibraryJs.routerGo('/index')
            }, 1500);
        }
    }

}

const mapStateToProps = (state) => state;
const mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(ModuleList);